<template>
	<view class="page-wrapper">
		<view class="btn-group">
			<view class="btn-wrapper">
				<button type="default" @click="handleSetstorage">setStorage</button>
			</view>
			<view class="btn-wrapper">
				<button type="default" @click="handleGetStorage">getStorage</button>
			</view>
			<view class="btn-wrapper">
				<button type="default" @click="handleRemoveStorage">removeStorage</button>
			</view>
			<view class="btn-wrapper">
				<button type="default" @click="handleGetStorageInfo">getStorageInfo</button>
			</view>
			<view class="btn-wrapper">
				<button type="default" @click="handleClearStorage">clearStorage</button>
			</view>
			<view class="btn-wrapper">
				<button type="default">按钮</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storageItem:{
					id:1,
					content:'测试存储内容',
					title:"储值"
				}
			};
		},
		
		methods:{
			handleSetstorage: function (){
				uni.setStorage({
					key: 'setStorage_1',
					data:this.storageItem,
					success: function () {
						console.log('setStorage成功!');
					},
					fail: function() {
						console.log('setStorages失败!');
					}
				})
			},
			handleGetStorage: function(){
				uni.getStorage({
					key:'setStorage_1',
					success: function (res) {
						console.log('getStorage成功!');
						console.log(res);
					},
					fail: function() {
						console.log('getStorage失败!');
					}
				})
			},
			handleRemoveStorage: function(){
				uni.removeStorage({
					key:"setStorage_1",
					success:function(res){
						console.log('removeStorage成功！');
						console.log(res);
					},
					fail:function(){
						console.log('removeStorage失败！')
					}
				})
			},
			//异步获取storage相关信息
			handleGetStorageInfo: function(){
				uni.getStorageInfo({
					success: function(res){
						console.log('获取storageInfo信息成功！');
						console.log(res)
					},
					fail: function(err){
						console.log('获取storageIngo信息失败！');
						console.log(err);
					}
				})
			},
			// clear storage信息
			handleClearStorage: function(){
				uni.clearStorage({
					success: function(res){
						console.log('clear信息成功！');
						console.log(res);
					},
					fail: function(err) {
						console.log(err);
						console.log('clear信息失败！');
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.page-wrapper{
		padding: 0 15rpx;
		
		.btn-group{
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: 10rpx;
			grid-row-gap: 10rpx;
			.btn-wrapper{
				font-size: 0.7rem;
				// padding: 10rpx;
			}
		}
	}

</style>
